<template>
  <view class="payment-page">
    <uni-nav-bar title="选择支付方式" left-icon="arrowleft" :border="false" @clickLeft="goBack"></uni-nav-bar>
    
    <view class="payment-options">
      <view class="option" @click="selectPayment('wechat')">
        <image src="/static/payment/wechatpay.png" class="icon"></image>
        <text class="text">微信支付</text>
        <uni-icons type="arrowright" size="20" color="#ccc"></uni-icons>
      </view>
      <view class="option" @click="selectPayment('alipay')">
        <image src="/static/payment/alipay.png" class="icon"></image>
        <text class="text">支付宝支付</text>
        <uni-icons type="arrowright" size="20" color="#ccc"></uni-icons>
      </view>
    </view>

    <view class="payment-info">
      <text>您将支付：{{ amount }}元</text>
    </view>

    <!-- 用于承载支付宝返回的HTML表单 - 保持隐藏状态 -->
    <!-- 这个元素不再需要，web-view将加载HTML -->
    <!-- <view id="alipay-form-container" style="display: none;"></view> -->

  </view>
</template>

<script>
export default {
  data() {
    return {
      vipType: '', // 例如 'monthly', 'yearly'
      amount: 0,   // 支付金额
      // 可能还需要其他从上个页面传递过来的信息，如用户ID等
      loading: false, // 添加loading状态，防止重复点击
    };
  },
  onLoad(options) {
    // 从页面跳转参数中获取VIP类型和金额
    if (options.vipType && options.amount) {
      this.vipType = options.vipType;
      this.amount = options.amount;
      uni.setNavigationBarTitle({
        title: `支付 ${options.vipType} VIP`
      });
    } else {
      // 如果没有接收到参数，可以给出提示或返回上页
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      });
      setTimeout(() => {
        this.goBack();
      }, 1500);
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    selectPayment(method) {
      // 在这里处理支付逻辑
      // 根据选择的支付方式 (method)，调用相应的支付接口
      
      if (this.loading) {
          console.log('支付处理中，请勿重复点击');
          return; // 阻止重复点击
      }

      console.log(`选择了 ${method} 支付`);
      console.log(`VIP 类型: ${this.vipType}, 金额: ${this.amount}`);

      if (method === 'alipay') {
        console.log('准备调用后端创建支付宝订单接口');
        uni.showLoading({ title: '正在调起支付宝支付...' });
        this.loading = true; // 设置loading状态

        // TODO: 获取实际的 userId (通常从用户登录状态获取)
        const userId = 1; // Placeholder

        // TODO: 获取实际的 vipTypeId (需要从上个页面传递或根据vipType查询)
        // 假设 vipType 是 '30天'，你需要知道对应的 typeId 是多少
        // 这里只是演示，实际应用中需要根据 vipType 查找对应的 typeId
        let vipTypeId = 0; // 默认值或根据实际情况设置
        if (this.vipType === '7天') {
          vipTypeId = 1;
        } else if (this.vipType === '30天') {
          vipTypeId = 2;
        } else if (this.vipType === '365天') {
          vipTypeId = 3;
        }

        // 构建订单标题
        const subject = `${this.vipType}会员购买`;

        // 调用后端创建支付宝订单接口
        uni.request({
          url: 'http://localhost:9224/alipay/createOrder', // 替换为你的后端实际地址和端口
          method: 'POST',
          data: {
            userId: userId,
            vipTypeId: vipTypeId,
            amount: this.amount,
            subject: subject
          },
          success: (res) => {
            console.log('uni.request success 回调执行');
            uni.hideLoading();
            this.loading = false; // 结束loading状态
            console.log('创建订单接口返回:', res);
            
            // 检查后端返回的 Result 对象结构
            if (res.data && res.data.code === 200 && res.data.data) {
              console.log('后端返回数据结构符合预期，code为200');
              // 后端成功创建订单并返回商户订单号
              const outTradeNo = res.data.data; // 获取后端返回的商户订单号
              console.log('获取到商户订单号:', outTradeNo);

              if (outTradeNo) {
                 console.log('商户订单号存在，准备构建跳转URL');
                 // 构建后端提供支付HTML的URL
                 // !!! 注意：这里的域名和端口需要替换成你后端实际部署的地址 !!!
                 const backendBaseUrl = 'http://localhost:9224'; // 后端基础URL
                 const backendPayUrl = `${backendBaseUrl}/alipay/payPage?outTradeNo=${encodeURIComponent(outTradeNo)}`;
                 console.log('将要跳转的后端支付页面URL:', backendPayUrl);

                 console.log('准备跳转到 alipay-webview');
                 // 跳转到专门加载支付宝HTML的页面，将后端URL作为参数传递
                 uni.navigateTo({
                   url: '/pages/sign/alipay-webview?payUrl=' + encodeURIComponent(backendPayUrl),
                   success: () => {
                       console.log('uni.navigateTo success 回调执行: 成功跳转到 alipay-webview');
                   },
                   fail: (naviErr) => {
                       console.error('uni.navigateTo fail 回调执行: 跳转到 alipay-webview 失败:', naviErr);
                        uni.showToast({
                          title: '跳转支付页面失败',
                          icon: 'none'
                        });
                   }
                 });

              } else {
                  console.log('商户订单号不存在');
                  console.error('创建订单成功但未返回订单号');
                   uni.showToast({
                     title: '创建订单失败，缺少订单号',
                     icon: 'none'
                   });
              }

            } else {
               console.log('后端返回数据结构不符合预期或code不是200');
               console.error('后端返回错误或数据格式不正确:', res);
               // 根据后端返回的msg提示用户
               uni.showToast({
                 title: res.data ? res.data.msg : '创建订单失败', 
                 icon: 'none'
               });
            }
          },
          fail: (err) => {
            console.log('uni.request fail 回调执行');
            uni.hideLoading();
            this.loading = false; // 结束loading状态
            console.error('调用创建订单接口失败:', err);
            uni.showToast({
              title: '请求失败，请稍后再试',
              icon: 'none'
            });
          }
        });

      } else if (method === 'wechat') {
        // TODO: 微信支付逻辑
        uni.showToast({
          title: '微信支付功能开发中',
          icon: 'none'
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.payment-page {
  background-color: #f5f5f5;
  min-height: 100vh;

  .payment-options {
    margin-top: 20rpx;
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    padding: 0 30rpx;

    .option {
      display: flex;
      align-items: center;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .icon {
        width: 50rpx;
        height: 50rpx;
        margin-right: 20rpx;
      }

      .text {
        flex: 1;
        font-size: 30rpx;
        color: #333;
      }
    }
  }

  .payment-info {
    margin-top: 30rpx;
    text-align: center;
    font-size: 32rpx;
    color: #666;
  }
}
</style> 